<template>
  <div class="content-share">
    <div class="content-share-block">
      <!-- 左侧好友列表 -->
      <div class="share-friends default-block">
        <div class="share-friends-top share-friends-tabs">
          <div :class="curType === 'chat' ? 'tab left one-third active' : 'tab left one-third'" @click="topTabClick('会话')">
            <i class="el-icon-chat-dot-square icon"></i>会话
          </div>
          <div :class="curType === 'friends' ? 'tab center one-third active' : 'tab center one-third'" @click="topTabClick('好友')">
            <i class="el-icon-s-custom icon"></i>好友
          </div>
          <div :class="curType === 'groups' ? 'tab right one-third active' : 'tab right one-third'" @click="topTabClick('群组')">
            <i class="el-icon-chat-dot-round icon"></i>群组
          </div>
        </div>
        <div class="share-friends-center">
          <content-share-table
            :table-data="tableData"
            :cur-type="curType"
          ></content-share-table>
        </div>
        <div class="share-friends-bottom share-friends-tabs">
          <div class="tab left" @click="createGroup">创建群组</div>
          <div class="tab right" @click="addFriend">添加好友</div>
        </div>
      </div>

      <!-- 右侧聊天框 -->
      <div class="share-chat default-block">
        <div class="chat-top">
          {{ curChat !== null ? curChat.name : '暂无聊天信息' }}
        </div>
        <div class="chat-center">
          <content-share-chat></content-share-chat>
        </div>
        <div class="chat-bottom">
          <el-input size="small" placeholder="请输入你想发送的文字" style="width: 80%;" v-model="chatInput" @keyup.enter.native="sendMessage"></el-input>
          <el-button size="small" type="primary" style="margin-left: 10px;" :disabled="curChat === null" @click="sendMessage">发送</el-button>
        </div>
      </div>
    </div>

    <!-- 新增好友的弹框 -->
    <el-dialog
      title="添加好友"
      width="400px"
      :visible.sync="dialogVisible"
    >
      <el-input size="small" placeholder="请输入手机号/邮箱" v-model="addFriendName" @keyup.enter.native="confirmAdd('friend')"></el-input>
      <div style="margin-top: 10px;text-align: center;">
        <el-button type="primary" size="small" @click="confirmAdd('friend')">确认</el-button>
        <el-button type="default" size="small" @click="cancelAdd('friend')">取消</el-button>
      </div>
    </el-dialog>

    <!-- 查看群组成员 -->
    <el-dialog
      title="查看群成员"
      width="360px"
      custom-class="group-member-dialog"
      :visible.sync="groupDialogVisible"
    >
      <div class="group-member">
        <el-avatar shape="square">{{ $store.state.userInfo.name.substr(0, 1) }}</el-avatar>
        <div class="name">{{ $store.state.userInfo.name }}</div>
      </div>
      <div v-for="(item, i) in groupMembers" :key="i" class="group-member">
        <el-avatar shape="square">{{ item.substr(0, 1) }}</el-avatar>
        <div class="name">{{ item }}</div>
      </div>
      <div style="text-align: right;">
        <el-button type="danger" size="small" @click="existGroup">退出本群</el-button>
      </div>
    </el-dialog>

    <!-- 创建群组 -->
    <el-dialog
      title="创建群组"
      width="625px"
      :visible.sync="createGroupVisible"
    >
      <el-input size="small" placeholder="请输入群昵称" v-model="createGroupName" style="margin-bottom: 20px;"></el-input>
      <el-transfer
        filterable
        :filter-method="filterMethod"
        :titles="['好友列表', '群组成员']"
        filter-placeholder="请输入成员名称"
        v-model="chooseMember"
        :data="transferData">
      </el-transfer>
      <div style="margin-top: 20px;text-align: right;">
        <el-button type="primary" size="small" @click="confirmAdd('group')">确认</el-button>
        <el-button type="default" size="small" @click="cancelAdd('group')">取消</el-button>
      </div>
    </el-dialog>

    <!-- 查看好友详细信息 -->
    <el-dialog
      title="好友信息"
      width="320px"
      custom-class="friend-info-dialog"
      :visible.sync="friendInfoVisible"
    >
      <div class="friend-info-row first-row">
        <el-avatar shape="square">{{ friendInfo.name ? friendInfo.name.substr(0, 1) : '无' }}</el-avatar>
        <div class="name">{{ friendInfo.name }}</div>
      </div>
      <div class="friend-info-row">
        <div class="left">昵 称</div>
        <div class="right">{{ friendInfo.nickName }}</div>
      </div>
      <div class="friend-info-row">
        <div class="left">地 区</div>
        <div class="right">{{ friendInfo.from }}</div>
      </div>
      <div class="friend-info-row">
        <div class="left">来 源</div>
        <div class="right">{{ friendInfo.source }}</div>
      </div>
      <div style="text-align: right;margin-top: 10px;">
        <span @click="goToChat"><i class="el-icon-chat-line-round icon"></i></span>
        <span @click="deleteFriend"><i class="el-icon-delete icon danger"></i></span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ContentShareTable from '@/views/Content/ContentShare/component/ContentShareTable';
import ContentShareChat from '@/views/Content/ContentShare/component/ContentShareChat';
import { arrSorter } from '@/lib/common';
const chatList = require('./tableData/chatList.json');
const friendsList = require('./tableData/friendsList.json');
const groupsList = require('./tableData/groupsList.json');

export default {
  name: 'ContentShare',
  components: { ContentShareTable, ContentShareChat },
  data() {
    const transferData = () => {
      return friendsList.map(item => ({ label: item.name, key: item.name }));
    }
    return {
      curType: 'chat',
      curChat: null,
      tableData: chatList,
      chatList: chatList,
      friendsList: friendsList,
      groupsList: groupsList,
      chatInput: '',
      dialogVisible: false,
      addFriendName: '',
      groupDialogVisible: false,
      groupMembers: [],
      createGroupVisible: false,
      transferData: transferData(),
      chooseMember: [],
      createGroupName: '',
      friendInfoVisible: false,
      friendInfo: {},
    }
  },
  methods: {
    topTabClick(val) {
      if (val === '会话') {
        this.curType = 'chat';
        this.tableData = this.chatList;
      } else if(val === '好友') {
        this.curType = 'friends';
        this.tableData = arrSorter(this.friendsList, 'name');
      } else {
        this.curType = 'groups';
        this.tableData = this.groupsList;
      }
    },
    sendMessage() {
      if (this.chatInput === '') return this.$message.warning('不能发送空的信息');
      this.$bus.$emit('sendMessage', { chatContent: this.chatInput, name: this.$store.state.userInfo.name });
      this.chatInput = '';
    },
    addFriend() {
      this.addFriendName = '';
      this.dialogVisible = true;
    },
    createGroup() {
      this.createGroupName = '';
      this.chooseMember = [];
      this.createGroupVisible = true;
    },
    confirmAdd(type) {
      if (type === 'friend') {
        console.log(type);
        let phoneRegx = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
        let emailRegx = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

        if (!phoneRegx.test(this.addFriendName) && !emailRegx.test(this.addFriendName))
          return this.$message.warning('输入的必须为电话号码或者邮箱');

        this.$message.success('已成功向该账户发送好友请求');
        this.dialogVisible = false;
      } else if(type === 'group') {
        if (this.createGroupName === '') return this.$message.warning('请输入群昵称');
        if (this.chooseMember.length === 0) return this.$message.warning('请至少选择一个好友');
        this.groupsList.push({
          name: this.createGroupName,
          group: this.chooseMember
        });
        this.$message.success('创建群组成功');
        this.createGroupVisible = false;
      }
    },
    cancelAdd(type) {
      if (type === 'friend') {
        this.$message.info('已取消添加');
        this.dialogVisible = false;
      } else if(type === 'group') {
        this.createGroupVisible = false;
      }
    },
    filterMethod(query, item) {
      return item.key.indexOf(query) > -1;
    },
    existGroup() {
      this.$confirm('此操作将退出群聊并清空关于本群的所有聊天记录，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.groupsList.forEach((item, i) => {
            if (item.group === this.groupMembers) 
              this.groupsList.splice(i, 1);
              this.groupDialogVisible = false;
          })
          this.$message.success('操作成功');
        })
        .catch(() => {
          this.$message.info('取消操作');
        });
    },
    goToChat() {
      this.friendInfoVisible = false;
      this.$bus.$emit('chatClick', this.friendInfo);
    },
    deleteFriend() {
      this.$confirm('此操作将删除该好友和所有聊天记录，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.friendsList.forEach((item, i) => {
            if (item.name === this.friendInfo?.name) 
              this.friendsList.splice(i, 1);
              this.friendInfoVisible = false;
          })
          this.$message.success('已删除好友');
        })
        .catch(() => {
          this.$message.info('取消删除');
        });
    }
  },
  mounted() {
    this.$bus.$on('chatClick', (curChat) => {
      this.curChat = curChat;
    });
    this.$bus.$on('viewGroupMember', (name) => {
      this.groupDialogVisible = true;
      this.groupMembers = this.groupsList.filter(item => item.name === name)[0].group;
    });
    this.$bus.$on('viewFriendInfo', (name) => {
      this.friendInfoVisible = true;
      this.friendInfo = this.friendsList.filter(item => item.name === name)[0];
    });
  },
  beforeCreate() {
    this.$bus.$off('chatClick');
    this.$bus.$off('viewGroupMember');
  }
}
</script>

<style lang="less">
.content-share {
  width: 100%;
  height: calc(100% - 78px);
  padding-top: 10px;

  .content-share-block {
    width: 1004px;
    height: calc(100% - 80px);
    position: absolute;
    left: 50%;
    transform: translate(-50%);
  }

  .default-block {
    display: inline-block;
    box-sizing: border-box;
    height: 100%;
    border-radius: 4px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);

    &.share-friends {
      width: 282px;
      margin-right: 10px;
    }

    &.share-chat {
      width: 712px;
      display: flex;
      flex-direction: column;
      float: right;

      .chat-top {
        width: 100%;
        height: 56px;
        border-bottom: 1px solid #eff2f6;
        background: #F5F5F5;
        text-align: center;
        line-height: 56px;
        font-size: 14px;
        color: #666666;
      }

      .chat-center {
        width: 100%;
        height: calc(100% - 57px - 57px);
        box-sizing: border-box;
      }

      .chat-bottom {
        width: 100%;
        height: 56px;
        border-top: 1px solid #eff2f6;
        background: #F5F5F5;
        box-sizing: border-box;
        padding: 12px;
        text-align: center;
      }
    }
  }

  .share-friends-tabs {
    height: 56px;
    padding: 13px;
    box-sizing: border-box;

    .tab {
      width: 50%;
      height: 100%;
      float: left;
      line-height: 33px;
      text-align: center;
      cursor: pointer;
      color: #666666;
      font-size: 14px;

      .icon {
        margin-right: 4px;
        font-size: 18px;
      }

      &:hover, &.active {
        color: #09aaff;
      }

      &.left {
        width: calc(50% - 2px);
        border-right: 2px solid #eff2f6;
      }

      &.center {
        border-right: 2px solid #eff2f6;
      }

      &.one-third {
        width: calc(33% - 1px);
      }
    }

    &.share-friends-top {
      border-bottom: 1px solid #eff2f6;
    }

    &.share-friends-bottom {
      border-top: 1px solid #eff2f6;
      background-color: #fafafa;
      bottom: 0;
    }
  }

  .share-friends-center {
    height: calc(100% - 57px - 57px);
    width: 100%;
  }
}

.group-member-dialog {
  .el-dialog__body {
    padding: 10px 20px;
  }

  .group-member {
    .el-avatar {
      background: #09aaff;
    }

    .name {
      display: inline-block;
      vertical-align: top;
      height: 40px;
      line-height: 40px;
      margin-left: 10px;
      margin-bottom: 10px;
    }
  }
}

.friend-info-dialog {
  .el-dialog__body {
    padding: 10px 40px 20px;
  }

  .friend-info-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #666666;

    .el-avatar {
      background: #09aaff;
      width: 72px;
      height: 72px;
      line-height: 70px;
      font-size: 32px;
    }

    &.first-row {
      border-bottom: 1px solid #dddddd;
      margin-bottom: 16px;
      padding-bottom: 16px;

      .name {
        font-size: 30px;
        font-weight: 500;
        color: #000000;
      }
    }

    .left {
      width: 80px;
      line-height: 30px;
      letter-spacing: 10px;
    }

    .right {
      width: calc(100% - 80px);
      color: #222222;
      line-height: 30px;
    }
  }

  .icon {
    font-size: 32px;
    cursor: pointer;
    font-weight: 300;

    &.danger {
      margin-left: 20px;

      &:hover {
        color: red;
      }
    }

    &:hover {
      color: #09aaff;
    }
  }
}
</style>